<!DOCTYPE html>
<html class="">
<head>
<meta charset=utf-8 />
<title>Furatto :: Components</title>
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/furatto.css" />
<link rel="stylesheet" href="assets/css/font-awesome.css" />
<link rel="stylesheet" href="assets/css/docs.css" />
<link rel="shortcut icon" href="assets/img/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<script async="" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32608013-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body class="">

<div class="panels ">
  <div class="panel panel-inverse panel-left docs-panel">
  </div>
</div>

<div class="panel-content " id="body">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner docs-navbar-inner">
      <div class="container">
        <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
        <div class="nav-collapse collapse">
          <nav id="menu">
            <ul class="nav docs-navbar-menu">
              <li><a class="brand" href="index.html">Furatto</a></li>
              <li class=""><a href="getting_started.html">Getting Started</a></li>
              <li class=""><a href="docs.html">Docs</a></li>
              <li class=""><a href="javascript.html">Javascript</a></li>
              <li class="active"><a href="components.html">Components</a></li>
              <li class=""><a href="examples.html">Examples</a></li>
              <li class=""><a href="add_ons.html">Add-ons</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="section-jumbo-container">
      <h1 class="jumbo-header">Components</h1> 
      <p class="motto">
      A collection of useful components to spice up the web.
      </p>
    </div>
  </div>
  
  <div class="container-center">
    <div class="row">
       <div class="col-3">
        <div class="docs-sidebar">
          <!-- Navigation sidebar -->
          <ul class="nav nav-bordered">
            <li><a href="#icons">Icons</a></li>
            <li><a href="#navbar">Navbar</a></li>
            <li><a href="#labels_and_badges">Labels &amp; Badges</a></li>
            <li><a href="#alerts">Alerts</a></li>
          </ul>
          <!-- Navigation sidebar -->
        </div>
       </div>
       <div class="col-9">
        <div class="row">
           <!-- Icons section -->
           <div id="icons">
             <h2 class="header">Icons</h2>
             <h4 class="light">Furatto includes 361 icons in font format from <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>. Font awesome is an open-source project which provides you scalable vector icons that can be customized - size, color, or anything that you can do with CSS.</h4>
             <p>We provide some examples of icons for you to kick off and get started. For the complete documentation check <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome</a>.</p>
             <ul class="docs-icons">
              <li>
                <i class="icon-user"></i>
                .icon-user
              </li>
              <li>
                <i class="icon-cog"></i>
                .icon-cog
              </li>
              <li>
                <i class="icon-warning-sign"></i>
                .icon-warning-sign
              </li>
              <li>
                <i class="icon-thumbs-up"></i>
                .icon-thumbs-up
              </li>
              <li>
                <i class="icon-cogs"></i>
                .icon-cogs
              </li>
              <li>
                <i class="icon-comment"></i>
                .icon-comment
              </li>
              <li>
                <i class="icon-envelope"></i>
                .icon-envelope
              </li>
              <li>
                <i class="icon-flag"></i>
                .icon-flag
              </li>
              <li>
                <i class="icon-inbox"></i>
                .icon-inbox
              </li>
              <li>
                <i class="icon-info-sign"></i>
                .icon-info-sign
              </li>
              <li>
                <i class="icon-refresh"></i>
                .icon-refresh
              </li>
              <li>
                <i class="icon-remove"></i>
                .icon-remove
              </li>
              <li>
                <i class="icon-star"></i>
                .icon-star
              </li>
              <li>
                <i class="icon-tag"></i>
                .icon-tag
              </li>
              <li>
                <i class="icon-unlock-alt"></i>
                .icon-unlock-alt
              </li>
              <li>
                <i class="icon-file"></i>
                .icon-file
              </li>
              <li>
                <i class="icon-link"></i>
                .icon-link
              </li>
              <li>
                <i class="icon-desktop"></i>
                .icon-desktop
              </li>
              <li>
                <i class="icon-heart"></i>
                .icon-heart
              </li>
              <li>
                <i class="icon-off"></i>
                .icon-off
              </li>
              <li>
                <i class="icon-question-sign"></i>
                .icon-question-sign
              </li>
              <li>
                <i class="icon-trophy"></i>
                .icon-trophy
              </li>
              <li>
                <i class="icon-female"></i>
                .icon-female
              </li>
              <li>
                <i class="icon-male"></i>
                .icon-male
              </li>
              <li>
                <i class="icon-asterisk"></i>
                .icon-asterisk
              </li>
              <li>
                <i class="icon-camera"></i>
                .icon-camera
              </li>
              <li>
                <i class="icon-calendar"></i>
                .icon-calendar
              </li>
              <li>
                <i class="icon-cloud-upload"></i>
                .icon-cloud-upload
              </li>
              <li>
                <i class="icon-download-alt"></i>
                .icon-download-alt
              </li>
              <li>
                <i class="icon-home"></i>
                .icon-home
              </li>
              <li>
                <i class="icon-map-marker"></i>
                .icon-map-marker
              </li>
              <li>
                <i class="icon-ok"></i>
                .icon-ok
              </li>
              <li>
                <i class="icon-time"></i>
                .icon-time
              </li>
              <li>
                <i class="icon-wrench"></i>
                .icon-wrench
              </li>
              <li>
                <i class="icon-trash"></i>
                .icon-trash
              </li>
              <li>
                <i class="icon-group"></i>
                .icon-group
              </li>
              <li>
                <i class="icon-phone"></i>
                .icon-phone
              </li>
              <li>
                <i class="icon-facebook-sign"></i>
                .icon-facebook-sign
              </li>
              <li>
                <i class="icon-instagram"></i>
                .icon-instagram
              </li>
              <li>
                <i class="icon-twitter"></i>
                .icon-twitter
              </li>
             </ul>
             <h3>How to use</h3>
             <p>Furatto plays well with <a href="#">Font Awesome</a>, to integrate it you just need to add the <span class="code">font-awesome.css</span> file.</p>
             <pre data-language="html" class="hidden-xs">
               <code>
  <link rel="stylesheet" href="assets/css/font-awesome.css" />
              </code>
             </pre>
             <p>It is really easy to start using icons, just add the <span class="code">icon-</span> prefix and the icon name you want to display as in <span class="code">icon-user</span>.</p>
             <pre data-language="html" class="hidden-xs">
               <code>
  <i class="icon-user"></i>
              </code>
             </pre>
           </div>
           <!-- Icons section -->
           <hr />
           <!-- Navbar section -->
           <div id="navbar" class="docs-section">
             <h2 class="header">Navbar</h2>
             <h4>Navbars are responsive elements that works like navigation headers for the whole application. They collapse in mobile views, providing a side panel menu like in many native apps.</h4>
             <h3>Default navbar</h3>
              <blockquote class="content-quote">
                <h4>Absolute positioned</h4>    
                <p>Furatto brand new navbar works differently from version 1. Version 2 uses hardware acceleration to provide a better experience on panel animation, 
                this means the content and the panel are absolute positioned. Don't worry Furatto handles that for you by following the next layout.
                </p>
              </blockquote>
             <div class="docs-example">
               
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
        <div class="nav-collapse collapse">
          <nav id="menu">
            <ul class="nav">
              <li><a class="brand" href="index.html">Brand</a></li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings<b class="caret bottom-up"></b></a>
              <ul class="dropdown-menu bottom-up pull-right">
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Software</a></li>
                <li><a href="#">Industrial Design</a></li>
                <li><a href="#">Business Planning</a></li>
                <li class="divider"></li>
                <li><a href="#">Development and Research</a></li>
              </ul>
              </li>
            </ul>
            <form action="" method="get" accept-charset="utf-8" class="navbar-form pull-right search-navbar-form">
              <div class="form-fields">
                <input type="text" name="" id="" value="" placeholder="Search" class="">
              </div>
              <input type="submit" name="" id="" value="Search" class="btn btn-info">
            </form>
          </nav>
        </div>
      </div>
    </div>
  </div>
  
             </div>
             <div class="docs-code hidden-xs">
              <pre data-language="html">
                 <code>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
        <div class="nav-collapse collapse">
          <nav id="menu">
            <ul class="nav">
              <li><a class="brand" href="index.html">Brand</a></li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings<b class="caret bottom-up"></b></a>
              <ul class="dropdown-menu bottom-up pull-right">
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Software</a></li>
                <li><a href="#">Industrial Design</a></li>
                <li><a href="#">Business Planning</a></li>
                <li class="divider"></li>
                <li><a href="#">Development and Research</a></li>
              </ul>
              </li>
            </ul>
            <form action="" method="get" accept-charset="utf-8" class="navbar-form pull-right search-navbar-form">
              <div class="form-fields">
                <input type="text" name="" id="" value="" placeholder="Search" class="">
              </div>
              <input type="submit" name="" id="" value="Search" class="btn btn-info">
            </form>
          </nav>
        </div>
      </div>
    </div>
  </div>
                 </code>
              </pre>
              
             </div>
             <h3>Navbar buttons</h3>
             <p>For buttons not linked to a form add the <span class="code">btn-navbar</span> class name.</p>
             <div class="docs-example">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="container">
                    <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
                    <div class="nav-collapse collapse">
                      <nav id="menu">
                        <ul class="nav">
                          <li><a class="brand" href="index.html">Brand</a></li>
                        </ul>
                        <button type="button" class="btn btn-info btn-navbar visible-lg">Sign In</button>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
             </div>
             <div class="docs-code hidden-xs">
               <pre data-language="html">
                 <code>
  <button type="button" class="btn btn-info btn-navbar">Sign In</button>
                 </code>
               </pre>
             </div>
  
            <h3>Navbar text</h3>
            <p>Text on the navbar can be wrapped on an element with a class name of <span class="code">navbar-text</span>.</p>
             <div class="docs-example">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="container">
                    <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
                    <div class="nav-collapse collapse">
                      <nav id="menu">
                        <ul class="nav">
                          <li><a class="brand" href="index.html">Brand</a></li>
                        </ul>
                        <p class="navbar-text visible-lg">Welcome, Abraham</p>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
             </div>
             <div class="docs-code hidden-xs">
               <pre data-language="html">
                 <code>
  <p class="navbar-text">Welcome, Abraham</p>
                 </code>
               </pre>
             </div>
            <h3>Navbar top fixed</h3>
            <h4 class="light">Add the <span class="code">navbar-fixed-top</span> class name.</h4>
             <div class="docs-example">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="container">
                    <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
                    <div class="nav-collapse collapse">
                      <nav id="menu">
                        <ul class="nav">
                          <li><a class="brand" href="index.html">Brand</a></li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
             </div>
             <div class="docs-code hidden-xs">
               <pre data-language="html">
                 <code>
  <div class="navbar navbar-fixed-top">
    ... 
  </div>
                 </code>
               </pre>
             </div>
              <blockquote class="content-quote">
                <h4>A note on Fixed navbar</h4>    
                <p>
                  For fixed top navbar you just need to add a padding on the top of <span class="code">51px</span> to the <span class="code">panel-content</span> element.
                </p>
              </blockquote>
             
            <h3>Navbar bottom fixed</h3>
            <h4 class="light">Add the <span class="code">navbar-fixed-bottom</span> class name.</h4>
             <div class="docs-example">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="container">
                    <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
                    <div class="nav-collapse collapse">
                      <nav id="menu">
                        <ul class="nav">
                          <li><a class="brand" href="index.html">Brand</a></li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
             </div>
             <div class="docs-code hidden-xs">
               <pre data-language="html">
                 <code>
  <div class="navbar navbar-fixed-bottom">
    ... 
  </div>
                 </code>
               </pre>
             </div>
  
            <h3>Inverse Navbar</h3>
            <h4 class="light">Add the <span class="code">navbar-inverse</span> class name.</h4>
             <div class="docs-example">
  <div class="navbar navbar-inverse">
    <div class="navbar-inner">
      <div class="container">
        <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
        <div class="nav-collapse collapse">
          <nav id="menu">
            <ul class="nav">
              <li><a class="brand" href="index.html">Brand</a></li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings<b class="caret bottom-up"></b></a>
              <ul class="dropdown-menu bottom-up pull-right">
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Software</a></li>
                <li><a href="#">Industrial Design</a></li>
                <li><a href="#">Business Planning</a></li>
                <li class="divider"></li>
                <li><a href="#">Development and Research</a></li>
              </ul>
              </li>
            </ul>
            <form action="" method="get" accept-charset="utf-8" class="navbar-form pull-right visible-lg">
              <div class="form-fields">
                <input type="text" name="" id="" value="" placeholder="Search" class="" />
              </div>
              <input type="submit" name="" id="" value="Search" class="btn btn-info" />
            </form>
          </nav>
        </div>
      </div>
    </div>
  </div>
  
             </div>
             <div class="docs-code hidden-xs">
               <pre data-language="html">
                 <code>
  <div class="navbar navbar-inverse">
    ... 
  </div>
                 </code>
               </pre>
             </div>
  
           </div>
           <!-- Navbar section -->
           <hr />
           <!-- Labels and Badges section -->
           <div id="labels_and_badges" class="docs-section">
             <h2 class="header">Labels &amp; Badges</h2>
             <h4 class="light">Highlight important content, make notice of important announcements with labels or badges by adding the corresponding class name.</h4>
              <h4>Labels</h4>
              <table class="table table-bordered table-striped responsive">
                 <thead>
                   <tr>
                     <th>Label variation</th>
                     <th>Markup</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
                     <td><span class="label">Default</span></td>
                      <td><span class="code">&lt;span class="label"&gt;Default&lt;/span&gt;</span></td>
                   </tr>
                  <tr>
                    <td><span class="label label-primary">Primary</span></td>
                    <td><span class="code">&lt;span class="label label-primary"&gt;Primary&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="label label-success">Success</span></td>
                    <td><span class="code">&lt;span class="label label-success"&gt;Success&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="label label-danger">Danger</span></td>
                    <td><span class="code">&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="label label-warning">Warning</span></td>
                    <td><span class="code">&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="label label-inverse">Inverse</span></td>
                    <td><span class="code">&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="label label-info">Info</span></td>
                    <td><span class="code">&lt;span class="label label-info"&gt;Info&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="label label-funky">Funky</span></td>
                    <td><span class="code">&lt;span class="label label-funky"&gt;Funky&lt;/span&gt;</span></td>
                  </tr>
                 </tbody>
              </table>
              <h4>Badges</h4>
              <table class="table table-bordered table-striped responsive">
                 <thead>
                   <tr>
                     <th>Badge variation</th>
                     <th>Markup</th>
                   </tr>
                 </thead>
                 <tbody>
                  <tr>
                    <td><span class="badge">1</span></td>
                    <td><span class="code">&lt;span class="badge"&gt;1&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-primary">2</span></td>
                    <td><span class="code">&lt;span class="badge badge-primary"&gt;2&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-success">3</span></td>
                    <td><span class="code">&lt;span class="badge badge-success"&gt;3&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-danger">4</span></td>
                    <td><span class="code">&lt;span class="badge badge-danger"&gt;4&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-warning">5</span></td>
                    <td><span class="code">&lt;span class="badge badge-warning"&gt;5&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-inverse">6</span></td>
                    <td><span class="code">&lt;span class="badge badge-inverse"&gt;6&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-info">7</span></td>
                    <td><span class="code">&lt;span class="badge badge-info"&gt;7&lt;/span&gt;</span></td>
                  </tr>
                  <tr>
                    <td><span class="badge badge-funky">8</span></td>
                    <td><span class="code">&lt;span class="badge badge-funky"&gt;8&lt;/span&gt;</span></td>
                  </tr>
                 </tbody>
              </table>
           </div>
           <!-- Labels and Badges section -->
           <hr />
           <!-- Alerts section -->
           <div id="alerts">
            <h2 class="header">Alerts</h2>
            <h4 class="light">Provide meaningful feedback messages across the website in response to user actions.</h4>
            <p>Wrap any text and an optional close button and one of the modifier class names. The default alert is a notice message with a light orange as background.</p>
            <div class="docs-example">
              <div class="alert">
                <button type="button" class="close">x</button>
                <h4 class="header">Hola mundo!</h4>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div> 
              <div class="alert alert-success">
                <button type="button" class="close">x</button>
                <h4 class="header">Hola mundo!</h4>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div> 
              <div class="alert alert-info">
                <button type="button" class="close">x</button>
                <h4 class="header">Hola mundo!</h4>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div> 
              <div class="alert alert-danger">
                <button type="button" class="close">x</button>
                <h4 class="header">Hola mundo!</h4>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div> 
            </div>
            <div class="docs-code hidden-xs">
              <pre data-language="html">
                <code>
  <div class="alert">...</div> 
  <div class="alert alert-success">...</div> 
  <div class="alert alert-info">...</div> 
  <div class="alert alert-danger">...</div> 
                </code>
              </pre>            
            </div>
           </div>
           <!-- Alerts section -->
        </div>  
       </div>
    </div>
  </div>
  <div class="row footer ">
  <p class="copyright">Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank" class="docs-license">Apache License v2.0</a></p>
  <ul class="inline">
    <li><a href="index.html">Home</a></li>
    <li><a href="assets/furatto.zip" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Download', 'Download V2']);">Download</a></li>
    <li><a href="https://github.com/IcaliaLabs/furatto-rails">Rails</a></li>
    <li><a href="https://github.com/IcaliaLabs/furatto" target="_blank">Github</a></li>
    <li><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></li>
  </ul>
</div>

</div>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/furatto.min.js"></script>
<script src="assets/js/furatto-demo.js"></script>
</body>
</html>
